function Page(options = {}, fn) {
    this.options = options;
    this.default = {
        language: {
            first: "首页",
            previous: "上一页",
            list: null,
            next: "下一页",
            last: "末页",
        },
        pageData: {
            total: 100,
            pageSize: 10
        }
    }
    this.list = null;
    this.fn = fn || function() {};

    // 定义一个盒子
    this.box = null;
    //定义当前页数
    this.currentPage = 1;



    //3.用户传参方法
    this.setdefault();
    //总页数
    this.totalPage = Math.ceil(this.default.pageData.total / this.default.pageData.pageSize);

    //4.根据对象创建标签
    this.createTag();
    //5.创建页码
    this.creatPage();
    //所有按钮
    this.click();
    //输入框
    this.creatText();
    this.fn(this.currentPage);

}

//输入框
Page.prototype.creatText = function() {
        var input = document.createElement("input");
        input.setAttribute("type", "number");
        this.box.appendChild(input);
        this.setStyle(input, {
            width: "50px",
            height: "18px",
            margin: "5px",
            padding: "5px"
        });
        var btn = document.createElement("button");
        btn.innerText = "跳";
        this.box.appendChild(btn);
        this.setStyle(btn, {
            width: "30px",
            height: "30px",
            margin: "5px",
            padding: "5px"
        })
    }
    //所有按钮
Page.prototype.click = function() {
        //事件委托
        this.box.onclick = (e) => {
            var e = e || window.event;
            if (e.target.className == "first" && e.target.getAttribute("disabled") != "true") {
                this.currentPage = 1;
                this.list.innerHTML = "";
                this.creatPage();
                this.setDisabled();
                this.fn(this.currentPage);

            } else if (e.target.className == "last" && e.target.getAttribute("disabled") != "true") {
                this.currentPage = this.totalPage;
                this.list.innerHTML = "";
                this.creatPage();
                this.setDisabled();
                this.fn(this.currentPage);

            } else if (e.target.className == "previous" && e.target.getAttribute("disabled") != "true") {
                this.currentPage--;
                this.list.innerHTML = "";
                this.creatPage();
                this.setDisabled();
                this.fn(this.currentPage);

                // console.log(this.default)
                // console.log(this.currentPage)
            } else if (e.target.className == "next" && e.target.getAttribute("disabled") != "true") {
                this.currentPage++;
                this.list.innerHTML = "";
                this.creatPage();
                this.setDisabled();
                this.fn(this.currentPage);

            } else if (e.target.nodeName == "P" && this.currentPage != e.target.innerText - 0) {
                this.currentPage = e.target.innerText - 0;
                this.list.innerHTML = "";
                this.creatPage();
                this.setDisabled();
                this.fn(this.currentPage);

            } else if (e.target.nodeName == "BUTTON" && e.target.previousElementSibling.value != "" && e.target.previousElementSibling.value >= 1 && e.target.previousElementSibling.value <= this.totalPage && e.target.previousElementSibling.value != this.currentPage) {
                this.currentPage = e.target.previousElementSibling.value - 0;
                this.list.innerHTML = "";
                this.creatPage();
                this.setDisabled();
                this.fn(this.currentPage);

            }

        }
    }
    //禁用的方法
Page.prototype.setDisabled = function() {
        if (this.currentPage == 1) {
            this.box.children[0].style.backgroundColor = "pink";
            this.box.children[1].style.backgroundColor = "pink";

            this.box.children[0].setAttribute("disabled", "true");
            this.box.children[1].setAttribute("disabled", "true");
        } else {
            this.box.children[0].style.backgroundColor = "white";
            this.box.children[1].style.backgroundColor = "white";

            this.box.children[0].setAttribute("disabled", "false");
            this.box.children[1].setAttribute("disabled", "false");
        }
        if (this.currentPage == this.totalPage) {
            this.box.children[3].style.backgroundColor = "pink";
            this.box.children[4].style.backgroundColor = "pink";

            this.box.children[3].setAttribute("disabled", "true");
            this.box.children[4].setAttribute("disabled", "true");
        } else {
            this.box.children[3].style.backgroundColor = "white";
            this.box.children[4].style.backgroundColor = "white";

            this.box.children[3].setAttribute("disabled", "false");
            this.box.children[4].setAttribute("disabled", "false");
        }
    }
    //创建页码
Page.prototype.creatPage = function() {
    var p = document.createElement("p");
    this.list.appendChild(p);

    if (this.totalPage <= 5) {
        for (var i = 1; i <= this.totalPage; i++) {
            var p = document.createElement("p");
            p.innerText = i;
            this.setStyle(p, {
                padding: "10px",
                margin: "10px",
                border: "1px solid #000"
            });
            if (this.currentPage == i) {
                p.style.backgroundColor = "skyblue";
            }
            this.list.appendChild(p);

        }
    } else {
        if (this.currentPage <= 3) {
            for (var i = 1; i <= 5; i++) {
                var p = document.createElement("p");
                p.innerText = i;
                this.setStyle(p, {
                    padding: "10px",
                    margin: "10px",
                    border: "1px solid #000"
                });
                if (this.currentPage == i) {
                    p.style.backgroundColor = "skyblue";
                }
                this.list.appendChild(p);
            }
        } else if (this.currentPage >= this.totalPage - 2) {
            for (var i = this.totalPage - 4; i <= this.totalPage; i++) {
                var p = document.createElement("p");
                p.innerText = i;
                this.setStyle(p, {
                    padding: "10px",
                    margin: "10px",
                    border: "1px solid #000"
                });
                if (this.currentPage == i) {
                    p.style.backgroundColor = "skyblue";
                }
                this.list.appendChild(p);
            }
        } else {
            for (var i = this.currentPage - 2; i <= this.currentPage + 2; i++) {
                var p = document.createElement("p");
                p.innerText = i;
                this.setStyle(p, {
                    padding: "10px",
                    margin: "10px",
                    border: "1px solid #000"
                });
                if (this.currentPage == i) {
                    p.style.backgroundColor = "skyblue";
                }
                this.list.appendChild(p);
            }
        }
    }
}

//用户传参方法
Page.prototype.setdefault = function() {
        for (var attr in this.options.language) {
            this.default.language[attr] = this.options.language[attr];
            // attr = first   previous   next    last
            // this.default.language["first"] = "first"
        }
        for (var attr in this.options.pageData) {
            this.default.pageData[attr] = this.options.pageData[attr];
        }
    }
    //创建标签
Page.prototype.createTag = function() {
        this.box = document.createElement("div");
        this.box.className = "box";

        this.setStyle(this.box, {
            width: "1190px",
            height: "40px",
            border: "1px solid skyblue",
            display: "flex",
            "justify-content": "center",
            alignItems: "center",
            margin: "20px auto",
        });
       
        
        document.querySelector(".bbox").appendChild(this.box);
        for (var attr in this.default.language) {
            var div = document.createElement("div");
            div.innerText = this.default.language[attr];
            div.className = attr;
            if (attr != "list") {
                this.setStyle(div, {
                    padding: "10px",
                    margin: "10px 10px",
                    border: "1px solid #000",
                    backgroundColor:"#f4f4f4"
                });
            } else {
                this.list = div;
                this.setStyle(div, {
                    display: "flex",
                    "justify-content": "center",
                    alignItems: "center"
                });
            }
            this.box.appendChild(div);
        }
    }
    //创建设置样式的方法
Page.prototype.setStyle = function(ele, objstyle) {
        for (var attr in objstyle) {
            ele.style[attr] = objstyle[attr];
        }
    }
    //使用分页
// var ul = document.createElement("ul");
// var arr = [];
// for (var i = 1; i <= 1000; i++) {
//     var li = document.createElement("li");
//     li.style.listStyle = "none";
//     li.style.textAlign = "center";
//     if (i % 2 == 0) {
//         li.style.background = "skyblue"
//     } else {
//         li.style.background = "pink";
//     }
//     var str = "";
//     for (var j = 0; j < 10; j++) {
//         str += "&nbsp;&nbsp;&nbsp;&nbsp;" + i
//     }
//     li.innerHTML = str;
//     arr.push(li);
// }
// document.body.appendChild(ul);
// //2.new 一个对象
// var fyc = new Page({
//     language: {
//         first: "first",
//         previous: "<",
//         next: ">",
//         last: "last",
//     },
//     pageData: {
//         total: arr.length,
//         pageSize: 12
//     }
// }, function(currentPage) {
//     var date = arr.slice((currentPage - 1) * 12, currentPage * 12);
//     ul.innerHTML = "";
//     for (var i = 0; i < date.length; i++) {
//         ul.appendChild(date[i]);
//     }
// });